<!-- 测试hooks及directive -->
<template>
  <div class="btns">
    <button class="btn" v-prem-show="'shop:create'">增加按钮</button>
    <button class="btn" v-prem-show="'shop:delete'">删除按钮</button>
    <button class="btn" v-prem-show="'shop:edit'">修改按钮</button>
  </div>
  <div>
    <div>
      <img
        width="350px"
        src=""
        alt="#"
        v-for="(item, index) in list"
        v-lazy="item"
        :key="index" />
    </div>
    <div>
      <img id="img" width="350px" src="@/assets/imgs/05.jpg" alt="#" />
    </div>
  </div>
</template>

<script setup lang="ts" name="Test">
  import { vPremShow, vLazy } from "@/utils/directive";
  import { useImgToBase64 } from "@/utils/hooks";

  useImgToBase64({ el: "#img" }).then(res => {
    console.log(res.baseUrl);
  });

  localStorage.setItem("userId", "jc-zs");
  //glob 是懒加载模式；
  //eager 是静态加载；
  const imgList: Record<string, { default: string }> = import.meta.glob(
    "@/assets/imgs/*.*",
    { eager: true }
  );

  const list = Object.values(imgList).map(item => item.default);
</script>

//app里不能加scoped作用域
<style scoped lang="scss">
  .btns {
    .btn {
      border: 1px solid #000;
      margin-right: 10px;
    }
  }
</style>
